<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页-(功能区)失物招领</title>
		<link rel="stylesheet" href="/stylesheets/root.css">
		<link rel="stylesheet" href="/stylesheets/public-stylesheets.css">
		<!-- <link rel="stylesheet" href="/stylesheets/schoolmessage.css"> -->
		<link rel="stylesheet" href="/stylesheets/found_lost.css">
	</head>

	<style>
		#stuffType,#timeType,#locType{
			border: none;
			font-size: 2vb;
		}

	</style>

	<body>
		<!-- 顶部栏组件 -->
		<div id="top">
			<p>事物招领处</p>
			<a href="/index.html">
				<img src="/images/public_images/return.png" alt="返回">
			</a>
		</div>
		<!-- 搜索框 -->
		<div id="search_found">
			<img src="/images/massage/sousuo.png" alt="" />
			<div id="searcher">
				<!-- 此处应设置js跳转搜索子界面 -->
                <input type="text" class="search-input" name="" placeholder="请搜索你丢失的物品">
				<!-- <p>搜索你丢失的物品</p> -->
			</div>
			<img src="/images/found_lost/jiahao2fill.png" alt="" />
		</div>
		<!-- 提示 -->
		<div id="warm">
			<p>提示：捡到人向您索要xxxxx，请提高xxxx！</p>
		</div>
		<!-- 寻物 -->
		<div id="lost_found">
			<p class="lost_found">寻物</p>
			<p>招领</p>
		</div>

		<!-- 三个选择 -->
		<div id="select_box">
			<div class="select_box_small">
				<select name="" id="stuffType">
					<option value="option1">全部类型</option>
					<option value="option2">数码设备</option>
					<option value="option3">证件</option>
					<option value="option4">日用品</option>
					<option value="option5">服饰</option>
					<option value="option6">其它</option>
				</select>
				<!-- <p>全部类型</p> -->
				<!-- <img src="/images/found_lost/xiangxia.png" alt="" /> -->
			</div>
			<div class="select_box_small">
				<select name="" id="timeType">
					<option value="option1">全部时间</option>
					<option value="option2">三天内</option>
					<option value="option3">一周内</option>
					<option value="option4">一个月内</option>
					<option value="option5">三个月内</option>
				</select>
				<!-- <p>全部时间</p>
				<img src="/images/found_lost/xiangxia.png" alt="" /> -->
			</div>
			<div class="select_box_small">
				<select name="" id="locType">
					<option value="option1">教学楼</option>
					<option value="option2">全部类型</option>
					<option value="option3">图书馆</option>
					<option value="option4">操场</option>
					<option value="option5">饭堂</option>
					<option value="option6">体育馆</option>
				</select>
				<!-- <p>全部地点</p>
				<img src="/images/found_lost/xiangxia.png" alt="" /> -->
			</div>
		</div>

		<!-- 物品信息 -->
		<!-- 数码设备 5条 -->

		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/ipad.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：ipad</p>
				<p>时间：三天内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>
		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/iphone.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：iphone</p>
				<p>时间：一周内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>


		<!-- 证件 3条 -->

		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/xueshengzheng.png" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：学生证</p>
				<p>时间：一周内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>

		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/gonjiaocheka.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：公交车卡</p>
				<p>时间：一个月内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>

		<!-- 日用品 3条 -->

		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/yusan2.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：雨伞2</p>
				<p>时间：一周内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>

		<!-- 服饰 3条 -->
		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/maozi1.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：帽子1</p>
				<p>时间：三天内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>

		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/maozi2.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：帽子2</p>
				<p>时间：一周内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>
		
		<!-- 其它 1条-->
		<div id="found_conten_box">
			<div id="found_conten_box_left">
				<img src="/images/found_lost/keben.jpg" alt="" />
			</div>
			<div id="found_conten_box_right">
				<p style="color: #F22C3D;" >失物：课本</p>
				<p>时间：三个月内</p>
				<p>地点：教学楼</p>
				<button style="color: #fefefe">认领</button>
			</div>
		</div>
		
		<script>
			var stuffType=document.querySelector('#stuffType');
			stuffType.addEventListener('change', function() {
			var stuff_value=this.value;	
			var shumashebei = 'option2';
			var zhengjian = 'option3';
			var ryonpin = 'option4';
			var fushi = 'option5';
			var qita = 'option6';
			
			if (stuff_value==shumashebei) { 
				window.location.href = '/webpage_copy/found_lost/found_lost_shumashebei.html'; // 跳转到对应页面
			}

			if (stuff_value==zhengjian) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_zhengjian.html'; // 跳转到对应页面
			}

			if (stuff_value==ryonpin) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_ryonpin.html'; // 跳转到对应页面
			}

			if (stuff_value==fushi) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_fushi.html'; // 跳转到对应页面
			}

			if (stuff_value==qita) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_qita.html'; // 跳转到对应页面
			}

		});

		
		document.querySelector('#timeType').addEventListener('change', function() {
			var time_value=this.value;	
			var three = 'option2';
			var week = 'option3';
			var month = 'option4';
			var threeMonths = 'option5';
			
			if (time_value==three) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_three.html'; // 跳转到对应页面
			}

			if (time_value==week) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_week.html'; // 跳转到对应页面
			}

			if (time_value==month) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_month.html'; // 跳转到对应页面
			}

			if (time_value==threeMonths) { 
			window.location.href = '/webpage_copy/found_lost/found_lost_threeMonths.html'; // 跳转到对应页面
			}
		});

		document.querySelector('#locType').addEventListener('change', function() {
			var loc_value=this.value;	
			var all = 'option2';
			var tushuguan = 'option3';
			var caochang = 'option4';
			var fantang = 'option5';
			var tiyuguan = 'option6';

			if (loc_value==tushuguan) {
			window.location.href = '/webpage_copy/found_lost/found_lost_tushuguan.html'; // 跳转到对应页面
			}
			if (loc_value==caochang) {
			window.location.href = '/webpage_copy/found_lost/found_lost_caochang.html'; // 跳转到对应页面
			}
			if (loc_value==all) {
			window.location.href = '/webpage_copy/found_lost.html'; // 跳转到对应页面
			}
			if (loc_value==fantang) {
			window.location.href = '/webpage_copy/found_lost/found_lost_fantang.html'; // 跳转到对应页面
			}
			if (loc_value==tiyuguan) {
			window.location.href = '/webpage_copy/found_lost/found_lost_tiyuguan.html'; // 跳转到对应页面
			}
		});
			
		</script>
		


	</body>

</html>